import React, { useState, useEffect } from 'react'
import { Modal, Card, Spin } from 'antd'
import { getRealtimeMonitor } from '&/api/electricity'
import Filter from './Filter'
import EchartsData from './EchartsData'
import dayjs from 'dayjs'
import './index.scss'
const ModalEacharts = ({ record, open, setOpen }) => {
  const value = JSON.parse(localStorage.getItem('user'))
  const [loading, setLoading] = useState(true)
  // state: 初始化echartData和paramsData
  const [echartData, setEchartData] = useState([])
  const [paramsData, setParamsData] = useState({
    project_id: value.project_id,
    data_type_id: 8,
    time_type: '1',
    get_warn: 1,
    start_time: dayjs().format('YYYY-MM-DD 00:00:00'),
    end_time: dayjs().format('YYYY-MM-DD 16:00:00')
  })
  useEffect(() => {
    if (!record) return
    // 根据record生成json参数
      if (record.start_time){
          console.log("正常")
      }else {
          record.start_time= JSON.parse(localStorage.getItem("paramsData"))['start_time']
          record.end_time= JSON.parse(localStorage.getItem("paramsData"))['end_time']
      }
    let json = {
      ...paramsData,
      ent_id: record.ent_id,
      start_time: record.start_time,
      end_time: record.end_time
    }
    // 更新paramsData状态
    setParamsData(json)
    // 调用onQuery方法查询数据
    onQuery(json)
  }, [record, open])
  // 折线图数据传参调接口
  const onQuery = async (params) => {
    await getRealtimeMonitorData(params)
  }
  // 请求接口获取数据
  const getRealtimeMonitorData = (json) => {
    setLoading(true)
    getRealtimeMonitor(json).then((res) => {
      // 更新echartData状态
      setEchartData(res)
      setLoading(false)
    })
  }
  const dom = (
    <div style={{ fontSize: 14, fontWeight: 'normal' }}>
      企业名称：{record?.ent_name}
      <br />
      限产措施：{record?.measure_old}
      <br />
      生产工序：{record?.production_process}
    </div>
  )
  return (
    <Modal
      title={dom}
      width={1200}
      destroyOnClose={true}
      onCancel={() => setOpen(false)}
      footer={false}
      open={open}
    >
      <div className="right-eacher">
        <Card bodyStyle={{ height: '100%' }} size="small">
          {/* 过滤器组件 */}
          <Filter
            onQuery={onQuery}
            paramsData={paramsData}
            setParamsData={setParamsData}
          />
          {/* 折线图组件 */}
          {loading ? (
            <div className="spin_modal">
              <Spin size="large" />
            </div>
          ) : (
            <EchartsData data={echartData} />
          )}
        </Card>
      </div>
    </Modal>
  )
}

export default ModalEacharts
